<template>
  <div class="pages-user-development">
    <div class="pages-user-development--btns">
      <div class="pages-user-development--btns__back" @click="backClick"></div>
      <div class="pages-user-development--btns__next" @click="nextClick"></div>
    </div>
    <div class="pages-user-development--twinkle">
      <circle-twinkle class="pages-user-development--twinkle__left" size="15px"></circle-twinkle>
      <circle-twinkle class="pages-user-development--twinkle__right" size="15px"></circle-twinkle>
    </div>
    <div class="pages-user-development--title">用户发展</div>
    <div class="pages-user-development--pies">
      <pie-multi
        width="200px"
        height="190px"
        :series="pieSeries.one"
        :percentage="true"
        :legendOffset="['30px', '30px']"
      ></pie-multi>
      <pie-multi
        width="200px"
        height="190px"
        :series="pieSeries.two"
        :legendOffset="['30px', '30px']"
        unit="次"
      ></pie-multi>
      <pie-multi
        width="200px"
        height="190px"
        :series="pieSeries.three"
        :legendOffset="['30px', '30px']"
        unit="小时"
      ></pie-multi>
    </div>
    <div class="pages-user-development--bar">
      <right-run class="pages-user-development--bar__run"
        width="40"
        height="15"
        :size="15"
        :lineWidth="4"
        color="#1debff"
      ></right-run>
      <bar-3d
        width="490px"
        height="360px"
        :xAxis="{data: ['2015', '2016', '2017', '2018', '2019'], color: 'gray'}"
        :yAxis="{color: '#4bb285', name: '万户'}"
        :series="[{data: [209, 457, 962, 1475, 1684], color: ['rgb(33, 207, 213)', 'rgb(11, 72, 85, .5)']}]"
        :xy="[22, 10]"
        fontSize="22px"
        topTipFontSize="22px"
        :padding="[50, 55]"
        :showTopTipNumber="true"
      ></bar-3d>
    </div>
    <div class="pages-user-development--map">
      <right-run class="pages-user-development--map__run1"
        width="55"
        height="20"
        :size="20"
        :lineWidth="5"
        color="#1debff"
      ></right-run>
      <right-run class="pages-user-development--map__run2"
        width="55"
        height="20"
        :size="20"
        :lineWidth="5"
        color="#1debff"
      ></right-run>
      <radar-scan class="pages-user-development--map__radar"
        size="700px"
        :circleCount="4"
        dotColor="#23d3e0"
        lineColor="#236ba4"
        scanerColor="#1b97a5"
        bgColor="rgb(10, 27, 52)"
        coverColor="rgb(10, 27, 52, 0.1)"
      ></radar-scan>
      <div ref="sx_map" style="width:1220px;height:880px"></div>
      <div class="pages-user-development--map__lables">
        <div class="pages-user-development--map__lables--up">
          <svg-draw-line class="svg-draw-line"
            width="313px"
            height="40px"
            :points="[[313,35, 113,35], [113,35, 0,5]]"
            lineWidth="3px"
            duration="3s"
          ></svg-draw-line>
          <div class="svg-draw-line-dot">
            <circle-twinkle size="11px"></circle-twinkle>
          </div>
          <div class="lables--up--tip">
            <div class="lables--up--tip--value">78 <span style="color:yellow;">万户</span></div>
            <div class="lables--up--tip--title">陕北地区</div>
          </div>
        </div>
        <div class="pages-user-development--map__lables--middle">
          <svg-draw-line class="svg-draw-line"
            width="313px"
            height="40px"
            :points="[[0, 35, 260, 35], [260,35, 300,5]]"
            lineWidth="3px"
            duration="3s"
          ></svg-draw-line>
          <div class="svg-draw-line-dot">
            <circle-twinkle size="11px"></circle-twinkle>
          </div>
          <div class="lables--middle--tip">
            <div class="lables--middle--tip--value">166 <span style="color:yellow;">万户</span></div>
            <div class="lables--middle--tip--title">关中地区</div>
          </div>
        </div>
        <div class="pages-user-development--map__lables--bottom">
          <svg-draw-line class="svg-draw-line"
            width="400px"
            height="60px"
            :points="[[400,55, 50,55], [50,55, 50,0]]"
            lineWidth="3px"
            duration="3s"
          ></svg-draw-line>
          <div class="svg-draw-line-dot">
            <circle-twinkle size="11px"></circle-twinkle>
          </div>
          <div class="lables--bottom--tip">
            <div class="lables--bottom--tip--value">166 <span style="color:yellow;">万户</span></div>
            <div class="lables--bottom--tip--title">关中地区</div>
          </div>
        </div>
      </div>
      <div class="pages-user-development--map__alluser">1684 <span>万+</span></div>
    </div>
    <div class="pages-user-development--line-move">
      <div class="pages-user-development--line-move--left"><img src="../../assets/image/user_development/line-move-left.png" /></div>
      <div class="pages-user-development--line-move--right"><img src="../../assets/image/user_development/line-move-right.png" /></div>
    </div>
  </div>
</template>

<script>
import Mixins from "./mixins"
export default {
  name: "UserDevelopment",
  mixins: [ Mixins ],
  data() {
    return {
      map: null,
      pieSeries: {
        one: {
          title: {text: "月均活跃", color: '#df9771'},
          data: [
            {name: "电信", value: 335, radius: ["70%", "80%"], color: ['#65b0ed', '#2c3c58'], icon: "fangkuai" },
            {name: "移动", value: 310, radius: ["50%", "60%"], color: ['#4bb285', '#2c3c58'], icon: "fangkuai" },
            {name: "联通", value: 234, radius: ["30%", "40%"], color: ['#df9771', '#2c3c58'], icon: "fangkuai" }
          ]
        },
        two: {
          title: {text: "日均在线", color: '#df9771'},
          data: [
            {name: "电信", value: 0.7, radius: ["70%", "80%"], color: ['#65b0ed', '#2c3c58'], icon: "fangkuai" },
            {name: "移动", value: 0.5, radius: ["50%", "60%"], color: ['#4bb285', '#2c3c58'], icon: "fangkuai" },
            {name: "联通", value: 0.3, radius: ["30%", "40%"], color: ['#df9771', '#2c3c58'], icon: "fangkuai" }
          ]
        },
        three: {
          title: {text: "日均时长", color: '#df9771'},
          data: [
            {name: "电信", value: 8.2, radius: ["70%", "80%"], color: ['#65b0ed', '#2c3c58'], icon: "fangkuai" },
            {name: "移动", value: 3.2, radius: ["50%", "60%"], color: ['#4bb285', '#2c3c58'], icon: "fangkuai" },
            {name: "联通", value: 4.5, radius: ["30%", "40%"], color: ['#df9771', '#2c3c58'], icon: "fangkuai" }
          ]
        }
      }
    }
  },
  mounted() {
    
  },
  methods: {
    backClick() {
      this.$router.push({name: 'Index'})
    },
    nextClick() {
      this.$router.push({name: "Rating"})
    }
  }
}
</script>

<style lang="less" scoped>
@import "./style.less";
</style>